<template>
  <view class="anchor_wrap">
    <view class="anchor_container">
      <view class="anchor_tab_title">
        <view class="title_inner">
          <uni-segmented-control
            :current="current"
            :values="items.map(res=>res.title)"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#d4237a"
          ></uni-segmented-control>
        </view>
      </view>
      <view class="content">
        <view v-if="current === 0">
          <!-- 添加主播 -->
          <view class="addanchor" @tap="addzb">添加主播</view>
          <!-- <PlatForm class="platform"></PlatForm> -->
          <!-- <view class="swiper_wrap">
            <swiper autoplay>
              <swiper-item v-for="item in swiperInfo" :key="item.id">
                <image :src="item.bimage" mode="aspectFit" />
              </swiper-item>
            </swiper>
          </view> -->
          <anchorList
            ref="anchorlistref"
            class="list"
            v-on:regetAnchorList="regetAnchorList"
            v-on:changshow="changshow"
            v-on:regetList="regetList"
          ></anchorList>
          <!-- 底部跑马灯效果开始 -->
          <!-- 排行榜固定底部 -->
          <view class="ranklist">
            <view class="notice">
              <uni-notice-bar
                speed="15"
                ref="noticebar"
                :show-icon="true"
                :scrollable="true"
                :single="true"
                :text="rank_string"
                id="noticebar"
                background-color="#ffffff"
              />
            </view>
          </view>
          <!-- 底部跑马灯效果结束 -->
        </view>
        <view v-if="current === 1">
          <timeSelector
            class="picktime addanchor"
            showType="date"
            @btnConfirm="btnConfirm"
            @btnCancel="btnCancel"
            beginDate="2019-12-01"
            :endDate="endDate"
          >
            <view class="box-time">
              {{ time }}
              <uni-icons class="iconfont icon-rili" style="color: red;margin-left: 5rpx;"></uni-icons>
            </view>
          </timeSelector>
          <!-- <PlatForm class="platform"></PlatForm> -->
          <anchorData class="anchorData" v-on:changshow="changshow" ref="anchorData"></anchorData>
        </view>
        <addAnchor
          :showadd="showadd"
          v-on:regetAnchorList="regetAnchorList"
          v-on:changshow="changshow"
        ></addAnchor>
      </view>
    </view>
  </view>
</template>

<script>
import anchorList from "./anchor_list/index";
import anchorData from "./anchor_data/index";
import { uniSegmentedControl, uniNoticeBar, uniTag } from "@dcloudio/uni-ui";
import PlatForm from "./PlatForm/index";
import addAnchor from "./addAnchor/index";
import timeSelector from "./anchor_data/wing-time-selector";
export default {
  // 设置用户转发分享信息
  onShareAppMessage(res) {
    let pid = JSON.parse(uni.getStorageSync("login")).user_id;
    return {
      title: "天天赚钱",
      path: `/pages/anchor/anchor?pid=${pid}`,
      imgUrl: "https://ww1.yunjiexi.club/2020/03/18/GwFBk.png"
    };
  },
  components: {
    anchorList,
    anchorData,
    uniSegmentedControl,
    PlatForm,
    uniTag,
    uniNoticeBar,
    addAnchor,
    timeSelector
  },
  data() {
    return {
      items: [{ title: "主播列表" }, { title: "主播数据" }],
      current: 0,
      showadd: false,
      // 时间选择器截止时间
      endDate: "",
      // 时间选择器当前时间
      time: "",
      rank_string: "",
      swiperInfo: []
    };
  },
  mounted() {
    // 设置选择器的截止时间
    this.setEnddate();
    this.$http({
      url: `/api/index/index`
    }).then(res => {
      this.swiperInfo = res.data;
    });
    this.rank_string = wx.getStorageSync("rankstring");
    setTimeout(() => {
      this.rank_string = wx.getStorageSync("rankstring");
    }, 1000);
  },
  methods: {
    regetList(res) {
      // 用户列表刷新后重新获取底部跑马灯数据
      this.rank_string = res;
    },
    closeModal() {
      this.showadd1 = false;
      this.flag = false;
    },
    regetAnchorList(res) {
      // 添加操作结束后重新调用主播列表组件获取主播列表的方法
      setTimeout(() => {
        console.log("1s以后");
        this.$refs.anchorlistref.getAnchorList();
      }, 1000);
    },
    addzb() {
      // 查询是否授权过发送订阅消息，如果没有，就申请
      // #ifdef H5 || MP-WEIXIN

      wx.getSetting({
        withSubscriptions: true,
        success: res => {
          if (!res.itemSettings) {
            wx.requestSubscribeMessage({
              tmplIds: ["s9VZRLowEfxSJTxZa87luz7bt8AduXrcYCU8PCooiLA"],
              success(res) {
                console.log("res", res);
              },
              fail(err) {
                console.log("err1", err);
              }
            });
          }
        },
        fail: err => {
          console.log("err2", err);
        },
        complete: () => {}
      });

      // #endif
      this.showadd = true;
    },
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    handleRanking(res) {
      // console.log(res);
    },
    changshow(e) {
      this.showadd = e;
    },
    // 设置时间选择器截止时间
    setEnddate() {
      let endtimeYear = new Date().getFullYear();
      let endtimeMonth = new Date().getMonth() + 1;
      let endtimeDay = new Date().getDate();
      this.endDate = `${endtimeYear}-0${endtimeMonth}-${endtimeDay}`;
      this.time = `${endtimeYear}-0${endtimeMonth}-${endtimeDay}`;
    },
    // 时间选择器相关函数
    btnConfirm(e) {
      // 确定选择时间后发请求请求对应时间的主播数据
      this.$refs.anchorData.getZbdata(e.key);
      this.time = e.key;
    }
  }
};
</script>

<style lang='scss' scoped>
.test {
  position: absolute;
  font-size: 30px;
  z-index: 10;
  top: 0;
  right: 100px;
}
.anchor_container {
  // position: relative;
  padding-top: 40px;
  .addanchor {
    width: 33%;
    position: fixed;
    top: 0px;
    left: 10px;
    background-color: #fff;
    text-align: center;
    z-index: 10;
    font-size: 16px;
    height: 36px;
    line-height: 36px;
    color: #000000;
  }
  .anchor_tab_title {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
    width: 100%;
    background-color: #fff;
    z-index: 6;
    padding-left: 33%;
    .title_inner {
      // width: 60%;
      uni-segmented-control {
        color: #cccccc;
      }
    }
  }
  .content {
    padding-bottom: 43px;
    .anchorData {
      margin-top: 40px;
    }
    .platform {
      position: absolute;
      top: 36px;
      left: 0px;
      background-color: #fff;
      z-index: 5;
    }
    .list {
    }
    // 底部排行榜
    .ranklist {
      width: 100%;
      position: fixed;
      bottom: 0px;
      left: 0;
      background-color: #ffffff;
      z-index: 3;
      .phbtag {
        width: 15%;
        float: left;
        margin-left: 2%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: #ffffff;
      }
      .phbut {
        width: 20%;
        vertical-align: middle;
      }
      .notice {
        width: 100%;
        float: right;
        .uni-noticebar {
          margin-bottom: 0;
        }
      }
    }
  }
}

.swiper_wrap {
  height: 240px;
}
swiper {
  height: 240px;
  .swiper-item {
    border: 1px solid #000;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>